<template>
    <div>
        <div @click="btn">
            {{name}}
        </div>
        
        <router-link to="vm">vm</router-link>
        <h1>ref && reactive</h1>
        <h2>
        ref:{{ count }}
        </h2>
        <h2>
        reactive:{{ reactiveField }}
        </h2>
        <h2>
        reactive:{{ a[0].a }}
        </h2>
        <button @click="addRef">
        addRef
        </button>
        <button @click="addReactive">
        addReactive
        </button>
        <button @click="addA">
        addA
        </button>
        <!-- <div>
            <models :age="age" :name="userName"></models>
        </div> -->
    </div>
</template>

<script>
import {useStore} from "vuex"
import {ref, reactive, toRefs} from "vue"
export default {
    name:"index",
    data(){
        return{
            userName:0,
            age:0,
        }
    },
    // components:{
    //     models
        
    // },
    setup(){

        const store = useStore()
        const name = store.state.user.name

        const count = ref(0)
        const state = reactive({
            reactiveField: 0,
            a: [
            {
                a:1
            }
            ]
        })

        const addRef = () => {
            count.value++
        }

        const addReactive = () =>{
            state.reactiveField++
        }

        const addA = () => {
            state.a[0].a++
        }

        return {
            name,
            count,
            ...toRefs(state),
            addA,
            addRef,
            addReactive
        }
    },
    // computed:{
    //     ...mapState("user",['name'])
    // },
    methods:{
        btn(){
            console.log(this.$a)
        }
    }
}
</script>

<style lang="stylus" scoped>

</style>